<template>
  <div>
    <Paper title="新增批发商">
      <Form style="margin-top: 20px">
        <row>
          <i-col v-for="item in inputList" :key="item.id" span="24">
            <FormItem :label-width="88" :label="item.name">
              <Select class="input" v-if="item.selction"  v-model="item.value">
                <Option
                  v-for="innerItem in item.selction.option"
                  :value="innerItem.value"
                  :key="innerItem.value"
                  >{{ innerItem.label }}</Option
                >
              </Select>
              <Input class="input" v-else v-model="item.value"></Input>
            </FormItem>
          </i-col>
        </row>
      </Form>
    </Paper>
    <BottomBar>
      <Button class="confirm" type="primary" @click="primary()">提交</Button>
      <Button>取消</Button>
    </BottomBar>
  </div>
</template>

<script>
import Label from "../components/Label.vue";
import Paper from "../components/Paper.vue";
import BottomBar from "../components/BottomBar.vue";
import { postRequset } from "../libs/fetch";

export default {
  name: "SAddSalers",
  components: {
    Label,
    Paper,
    BottomBar,
  },
  data() {
    return {
      inputList: [
        {
          name: "姓名",
          id: 1,
          value:''
        },
        {
          name: "电话",
          id: 2,
          value:''
        },
        {
          name: "类型",
          id: 3,
          value:'',
          selction: {
            option:[
              {
                        value: 0,
                        label: '个体户'
                    },
                    {
                        value: 1,
                        label: '企业'
                    },
            ]
          },
        },
        {
          name: "身份证号",
          id: 4,
          value:''
        },
        {
          name: "地址",
          id: 5,
          value:'',
          selction: {
            option: [
              {
                        value: 'New York',
                        label: 'New York'
                    },
                    {
                        value: 'London',
                        label: 'London'
                    },
                    {
                        value: 'Sydney',
                        label: 'Sydney'
                    },
                    {
                        value: 'Ottawa',
                        label: 'Ottawa'
                    },
                    {
                        value: 'Paris',
                        label: 'Paris'
                    },
                    {
                        value: 'Canberra',
                        label: 'Canberra'
                    }
            ],
          },
        },
        {
          name: "工商注册号",
          id: 6,
          value:''
        },
      ],
      width: document.documentElement.clientWidth,
    };
  },
  methods:{
    primary() {
      let tempName='';
      let tempTel='';
      let tempStype='';
      let tempId='';
      let tempIdnumber='';
      let tempRegplace='';
      this.inputList.forEach(element => {
        if(element.id==1){
          tempName=element.value;
        };
        if(element.id==2){
          tempTel=element.value;
        };
        if(element.id==3){
          tempStype=element.value;
        };
        if(element.id==4){
          tempIdnumber=element.value;
        };
        if(element.id==5){
          tempRegplace=element.value;
        };
        if(element.id==6){
          tempId=element.value;
        }
      });
      postRequset("/sy-saler/register",
      {
        sname:tempName,
        stel:tempTel,
        sregplace:tempRegplace,
        sidnumber:tempIdnumber,
        sid:tempId,
        stype:tempStype
      }
      ).then((res) => {
          this.$router.push("/PQuerySalers");
        })
        .catch((error) => {
          console.log(error);
        });
    },
  }
};
</script>

<style scoped lang="less">
.input {
  max-width: 230px;
}
.confirm {
  width: 70px;
  margin-right: 12px;
}
</style>